<template>
  <div class="app-container">
    <el-select class="selector" v-model="selected_category" placeholder="请选择您的展示方式">
      <el-option v-for="(category,index) in categories" :key="index" :label="category.label" :value="category.value"></el-option>
    </el-select>
    <el-select class="selector" v-model="selected_store" placeholder="请选择您的展示店铺"  multiple collapse-tags collapse-tags-toolti>
      <el-option v-for="(store,index) in stores" :key="index" :label="store" :value="store"></el-option>
    </el-select>
    <el-select class="selector" v-model="selected_content" placeholder="请选择您的展示内容">
      <el-option v-for="(content,index) in contents" :key="index" :label="content.label" :value="content.value"></el-option>
    </el-select>
    <br>
    <label>开始时间</label><input type="datetime-local" class="time-input" v-model="start_date">
    <label>结束时间</label><input type="datetime-local" class="time-input" v-model="end_date">
    <br>
    <el-button class="confirm-button" @click="update">确定</el-button>
    <div id="chart"></div>
  </div>
</template>

<style>
.el-input__wrapper{
  width: 260px;
  height: 50px;
  border-radius: 20px;
}
</style>

<style scoped>
#chart{
  width: 1000px;
  height: 450px;
  border: 3px solid rgba(9, 9, 9, 0.705);
  border-radius: 15px;
  margin: 20px;
  background-color: rgb(255, 255, 255);
}
label,.time-input{
  width: 100px;
  height: 50px;
  margin-left: 20px;
  margin-bottom: 20px;
}
label{
  color: white;
}
.time-input{
  width: 300px;
}
.time-input{
  border-radius: 15px;
  border: 1px solid rgba(164, 160, 160, 0.7);
}
.header{
  color:aliceblue;
  height:30px;
}
.selector{
  width: 260px;
  height: 50px;
  margin-left: 20px;
  margin-bottom: 15px;
}
.confirm-button{
  width: 800px;
  height: 50px;
  margin-bottom: 30px;
  border-radius: 20px;
}
</style>

<script>
import * as echarts from 'echarts';
import moment from 'moment';
import {getRange,getdata} from '@/api/manage/visitor.js';
import {getStores} from '@/api/manage/display.js';
export default {
  data(){
    return {
      categories:[
        {
          label:"monthly",
          value:"/monthly"
        },{
          label:"daily",
          value:"/daily"
        },{
          label:"hourly",
          value:"/hourly"
        }
      ],
      contents:[
        {
          label:"停留时长",
          // TODO:
          value:"/frequency"
        },
        {
          label:"进店人次",
          value:"/frequency"
        },
      ],
      stores:['all'],
      selected_category:"",
      selected_store:[],
      selected_content:"",
      using_data:{},
      keys:[],
      start_date:'',
      end_date:'',
      values:[]
    }
  },
  mounted(){
    this.get_all_stores();
    this.get_time_range();
    this.draw();
  },
  watch:{
    using_data:{
      deep:true,
      handler:function(){
        this.keys = Object.keys(this.using_data[0]);
        for(let i = 0;i<this.using_data.length;i++){
          if(Object.keys(this.using_data[i]).length>this.keys.length){
            this.keys = Object.keys(this.using_data[i]);
          }
        }
        console.log("data",this.using_data);
        let tmp_values = [];
        for(var i = 0;i<this.using_data.length;i++)
          tmp_values.push(Object.values(this.using_data[i]));

        this.values = []
        for(let i = 0;i<tmp_values.length;i++){
          let tmp = [];
          for(let j = 0;j<this.keys.length;j++){
            if(j<tmp_values[i].length)
              tmp.push(tmp_values[i][j]);
            else
              tmp.push(0);
          }
          this.values.push(tmp);
        }
        console.log("keys",this.keys);
        console.log("values",this.values);
        this.draw();
      }
    }
  },
  methods: {
    update(){
      if(this.selected_category=="" || this.selected_store=="" || this.start_date=="" || this.end_date==""||this.selected_content==""){
        this.$message.warning("请先选择可视化内容");
        return;
      }
      this.get_data(this.selected_category,this.selected_store,this.selected_content);
    },
    // 获取时间范围
    get_time_range(){
      getRange().then(res=>{
        if(res.status==200){
          this.start_date = moment(res.data.start_date);
          this.end_date = moment(res.data.end_date);
          this.start_date = this.start_date.format('YYYY-MM-DDTHH:mm:ss');
          this.end_date = this.end_date.format('YYYY-MM-DDTHH:mm:ss');
          // this.$message.success("时间数据返回成功");
          console.log(this.start_date,this.end_date);
        }
        else {
          this.start_date = '';
          this.end_date = '';
          // this.$message.error("时间数据获取失败");
        }
      })
    },
    // 获取所有的商店
    get_all_stores(){
     getStores().then(res=>{
        if(res.status==200){
          this.stores = ['all'];
          console.log(res.data);
          for(let i = 0;i<res.data.stores.length;i++){
            this.stores.push(res.data.stores[i]);
          }
          // this.$message.success("商店数据返回成功");
        }
        else{
          this.stores = ['all'];
          // this.$message.error("商店数据获取失败");
        }
      })
    },
    // 获取不同时间维度的人流数据
    get_data(category,store_id,content){
      let url = "http://192.168.6.134:5000/visitor"+content+category;
      for(let i = 0;i<store_id.length;i++){
        if(store_id[i]=="all")
          store_id[i] = -1;
      }
      getdata({
        'store_id':store_id,
        'start_date':this.start_date,
        'end_date':this.end_date,
      },content,category).then(res=>{
        this.using_data = res.data;
        if(res.status==200){
          this.using_data = res.data;
          // this.$message.success("数据获取成功");
        }
        else {
          this.using_data = [];
          // this.$message.error("服务器错误");
        }
      })
    },
    draw(){
      var chartDom = document.getElementById('chart');
      var myChart = echarts.init(chartDom);
      var myseries = [];
      for(var i = 0;i<this.values.length;i++){
        myseries.push({
          type: 'line',
          data: this.values[i]
        })
      }
      var option = {
        // 放置鼠标显示数据
        tooltip: {
          trigger: 'axis',
          // 位置
          position: function (pt) {
            return [pt[0], '10%'];
          }
        },
        title: {
          left: 'center',
          text: '客流数据展示'
        },
        xAxis: {
          data: this.keys,
          boundaryGap: false,
        },
        yAxis: {
          type: 'value',
          // 分别决定上下空白
          boundaryGap: [0, '10%']
        },
        dataZoom: [
          {
            type: 'inside',
            start: 0,
            end: 100
          },
          {
            start: 0,
            end: 100
          }
        ],
        series: myseries
      };

      myChart.setOption(option);
    }
  },
}
</script>
